<template>
  <div class="product-detail-container">
  <!-- Back Navigation Header -->
    <div class="nav-header">
      <div class="nav-header-content">
        <div class="back-button" @click="goBack">
          <van-icon name="arrow-left" size="20" />
        </div>
        <div class="header-title">{{ product.name }}</div>
        <div class="header-actions">
          <van-icon name="share-o" size="20" class="action-icon" @click="shareProduct" />
          <van-icon name="star-o" size="20" class="action-icon" @click="toggleFavorite" />
        </div>
      </div>
    </div>

    <!-- Product Image Gallery -->
    <div class="image-gallery">
      <van-swipe class="product-swipe" :autoplay="3000" indicator-color="#1989fa">
        <van-swipe-item v-for="(image, index) in product.images" :key="index">
          <img :src="image" :alt="`${product.name} - 图片 ${index + 1}`" class="gallery-image" />
        </van-swipe-item>
      </van-swipe>
    </div>

    <!-- Product Info Card -->
    <div class="product-info-card">
      <div class="product-price-row">
        <div class="product-price">
          <span class="amount">{{ product.price }}</span>
          <span class="currency">{{ product.payIcon  }}</span>
        </div>
        <div class="original-price">{{ product.originalPrice }} {{ product.payIcon }}</div>
      </div>

      <h1 class="product-title">{{ product.name }}</h1>
      
      <div class="product-stats">
        <div class="stat-item">
          <van-icon name="like-o" />
          <span>{{ product.likes || 0 }}人喜欢</span>
        </div>
        <div class="stat-item">
          <van-icon name="cart-o" />
          <span>{{ product.sales || 0 }}件已售</span>
        </div>
        <div class="stat-item">
          <van-icon name="comment-o" />
          <span>{{ product.comments || 0 }}条评论</span>
        </div>
      </div>
    </div>

    <!-- 规格选择 -->
    <div class="product-section">
      <div class="section-header" @click="showBuyPopup = true">
        <div class="section-title">
          <span>规格选择</span>
        </div>
        <div class="section-action">
          <span class="action-text">{{ selectedSpecText }}</span>
          <van-icon name="arrow" />
        </div>
      </div>
    </div>
   
    <!-- Shipping Information -->
    <div class="product-section">
      <div class="section-header" @click="showAddressPopup = true">
        <div class="section-title">
          <span>配送信息</span>
        </div>
        <div class="section-action">
          <span class="action-text">{{ selectedAddress ? `${selectedAddress.province} ${selectedAddress.city}` : '请选择收货地址' }}</span>
          <van-icon name="arrow" />
        </div>
      </div>
      <div class="shipping-info">
        <div class="shipping-item">
          <van-icon name="location-o" class="shipping-icon" />
          <div class="shipping-text">
            <div>{{ selectedAddress ? `${selectedAddress.name} ${selectedAddress.phone}` : '请选择收货地址' }}</div>
            <div class="shipping-subtext">{{ selectedAddress ? `${selectedAddress.province} ${selectedAddress.city} ${selectedAddress.district} ${selectedAddress.detail}` : '点击上方选择地址' }}</div>
          </div>
        </div>
        <div class="shipping-item">
          <van-icon name="logistics" class="shipping-icon" />
          <div class="shipping-text">
            <div>{{ product.shipping.method }}</div>
            <div class="shipping-subtext">{{ product.shipping.fee }}</div>
          </div>
        </div>
        <div class="shipping-item">
          <van-icon name="clock-o" class="shipping-icon" />
          <div class="shipping-text">
            <div>预计送达</div>
            <div class="shipping-subtext">{{ product.shipping.estimatedDelivery }}</div>
          </div>
        </div>
      </div>
    </div>

    <!-- Product Description -->
    <div class="product-section">
      <div class="section-header" @click="showFullDescription = !showFullDescription">
        <div class="section-title">
          <span>商品详情</span>
        </div>
        <div class="section-action">
          <van-icon :name="showFullDescription ? 'arrow-up' : 'arrow-down'" />
        </div>
      </div>
      <div class="product-description" :class="{ 'expanded': showFullDescription }">
        <div v-html="product.detail" class="detail-content rich-text-content"></div>
      </div>
    </div>


  <!-- Bottom Action Bar -->
    <div class="bottom-action-bar">
      <div class="action-bar-content">
        <div class="action-buttons">
          <div class="action-button" @click="navigateTo('/customer-service')">
            <van-icon name="service-o" size="22" />
            <span>客服</span>
          </div>
          <div class="action-button" @click="toggleFavorite">
            <van-icon name="star-o" size="22" />
            <span>收藏</span>
          </div>
        </div>
        <div class="purchase-buttons">
          <van-button type="danger" class="buy-now-button" @click="buyNow">立即购买</van-button>
        </div>
      </div>
    </div>

    <!-- 购买弹窗 -->
    <van-popup
      v-model:show="showBuyPopup"
      position="bottom"
      round
      closeable
      close-icon-position="top-left"
      :style="{ height: '85%', maxWidth: '800px', left: '50%', transform: 'translateX(-50%)' }"
    >
      <div class="buy-popup">
        <div class="buy-header">
          <div class="buy-product-preview">
            <img :src="product.images[0]" alt="商品缩略图" class="buy-product-image" />
          <div class="buy-product-info">
            <div class="buy-product-price">{{ currentPrice }} {{ selectedPayment }}</div>
            <div class="buy-product-stock">库存: {{ currentStock }}件</div>
            <div class="buy-selected">已选: {{ selectedSpecs }}</div>
          </div>
          </div>
        </div>

        <div class="buy-content">
          <!-- 规格选择区域 -->
          <div class="specs-selection-area">
            <!-- 规格选择 -->
            <div class="buy-section">
              <div class="buy-title">
                <span class="required-mark">*</span>规格
              </div>
              <div class="buy-options">
                <div 
                  v-for="spec in product.specs" 
                  :key="spec.id"
                  class="buy-option"
                  :class="{ 
                    'selected': selectedSize === spec.id.toString(), 
                    'disabled': spec.stock <= 0 
                  }"
                  @click="spec.stock > 0 && (selectedSize = spec.id.toString())"
                >
                  {{ spec.specName }}
                  <div v-if="spec.stock <= 0" class="sold-out-tag">已售罄</div>
                </div>
              </div>
            </div>

            <!-- Quantity Selection -->
            <div class="buy-section">
              <div class="buy-title">
                <span class="required-mark">*</span>数量
                <span class="stock-info">库存: {{ currentStock }}件</span>
              </div>
              <div class="quantity-selector">
                <van-stepper v-model="quantity" min="1" :max="currentStock" theme="round" button-size="28" />
              </div>
            </div>
          </div>
          
          <!-- 收货地址 -->
          <div class="buy-section address-section">
            <div class="buy-title">
              <span class="required-mark">*</span>收货地址
            </div>
            <div class="address-selector" @click="showAddressPopup = true">
              <div v-if="selectedAddress" class="selected-address">
                <div class="address-brief">
                  <span class="address-name">{{ selectedAddress.name }}</span>
                  <span class="address-phone">{{ selectedAddress.phone }}</span>
                </div>
                <div class="address-full">
                  {{ selectedAddress.province }} {{ selectedAddress.city }} {{ selectedAddress.district }} {{ selectedAddress.detail }}
                </div>
              </div>
              <div v-else class="no-address">
                <van-icon name="location-o" class="location-icon" />
                <span>请选择收货地址</span>
              </div>
              <van-icon name="arrow" class="address-arrow" />
            </div>
          </div>
          
          <!-- 支付方式-->
          <div class="buy-section payment-section">
            <div class="buy-title">
              <span class="required-mark">*</span>支付方式
            </div>
            <div class="payment-options">
              <div 
                v-for="payment in paymentMethods" 
                :key="payment.id"
                class="payment-option"
                :class="{ 'selected': selectedPayment === payment.id }"
                @click="selectedPayment = payment.id"
              >
                <div class="payment-icon">
                  <van-icon :name="payment.icon" :color="payment.color" size="24" />
                </div>
                <div class="payment-name">{{ payment.name }}</div>
                <div class="payment-check">
                  <van-icon name="success" v-if="selectedPayment === payment.id" color="#1989fa" />
                </div>
              </div>
            </div>
          </div>
           
          <!-- 订单金额 -->
          <div class="buy-section order-summary">
            <div class="summary-item">
              <span>商品单价</span>
              <span class="price">{{ currentPrice }} {{ selectedPayment }}</span>
            </div>
            <div class="summary-item">
              <span>购买数量</span>
              <span class="price">{{ quantity }}件</span>
            </div>
            <div class="summary-item">
              <span>商品金额</span>
              <span class="price">{{ totalPrice }} {{ selectedPayment }}</span>
            </div>
            <div class="summary-item">
              <span>运费</span>
              <span class="price">{{ product.shipping.fee === '免运费' ? '0.00' : product.shipping.fee }} {{ selectedPayment }}</span>
            </div>
            <div class="summary-total">
              <span>实付款</span>
              <span class="total-price">{{ totalPrice }} {{ selectedPayment }}</span>
            </div>
          </div>
        </div>

        <div class="buy-footer">
          <van-button type="danger" block @click="confirmPayment" :loading="isProcessingPayment" size="large" round>
            立即支付
          </van-button>
        </div>
      </div>
    </van-popup>

    <!-- 地址选择弹窗 -->
    <van-popup
      v-model:show="showAddressPopup"
      position="bottom"
      round
      closeable
      close-icon-position="top-left"
      :style="{ height: '80%', maxWidth: '800px', left: '50%', transform: 'translateX(-50%)' }"
    >
      <div class="address-popup">
        <div class="address-popup-header">
          <div class="popup-title">选择收货地址</div>
          <div class="add-address-button" @click="handleAddAddress">
            <van-button type="primary" size="small" icon="plus">添加新地址</van-button>
          </div>
        </div>
        
        <div class="address-list">
          <div v-if="addresses.length > 0">
            <div 
              v-for="address in addresses" 
              :key="address.id"
              class="address-item"
              @click="selectAddress(address)"
            >
              <div class="address-content">
                <div class="address-info">
                  <div class="contact-info">
                    <span class="name">{{ address.name }}</span>
                    <span class="phone">{{ address.phone }}</span>
                    <van-tag v-if="address.isDefault" type="primary" round size="mini" class="default-tag">默认</van-tag>
                    <div class="address-select-indicator" v-if="selectedAddress && selectedAddress.id === address.id">
                      <van-icon name="success" size="12" />
                    </div>
                  </div>
                  <div class="address-detail">{{ address.province }} {{ address.city }} {{ address.district }} {{ address.detail }}</div>
                </div>
                <div class="address-actions">
                  <div class="action-button" @click.stop="handleEditAddress(address)">
                    <van-icon name="edit" class="edit-icon" />
                  </div>
                  <div class="action-button" @click.stop="handleDeleteAddress(address.id)">
                    <van-icon name="delete" class="delete-icon" />
                  </div>
                </div>
              </div>
            </div>
          </div>
          
          <!-- 空状态 -->
          <div v-else class="empty-state">
            <van-icon name="location-o" size="48" class="empty-icon" />
            <p class="empty-text">暂无收货地址</p>
            <p class="empty-subtext">点击上方按钮添加新地址</p>
          </div>
        </div>
      </div>
    </van-popup>

    <!-- 地址表单弹窗 -->
    <van-popup
      v-model:show="addressDialogOpen"
      position="bottom"
      round
      closeable
      close-icon-position="top-left"
      :style="{ height: '90%', maxWidth: '800px', left: '50%', transform: 'translateX(-50%)' }"
    >
      <div class="form-header">
        <div class="form-title">{{ currentAddress && currentAddress.id ? '编辑地址' : '添加新地址' }}</div>
        <div class="form-subtitle">请填写收货地址信息，带 * 的为必填项</div>
      </div>
      
      <div class="address-form">
        <van-form @submit="handleSaveAddress">
          <van-cell-group inset>
            <van-field
              v-model="formData.name"
              name="name"
              label="收货人 *"
              placeholder="请输入收货人姓名"
              :rules="[{ required: true, message: '请填写收货人姓名' }]"
            />
            
            <van-field
              v-model="formData.phone"
              name="phone"
              label="手机号 *"
              placeholder="请输入手机号码"
              :rules="[
                { required: true, message: '请填写手机号码' },
                { pattern: /^1[3-9]\d{9}$/, message: '手机号码格式错误' }
              ]"
            />
            
            <van-field
              v-model="formData.province"
              name="province"
              label="省份 *"
              placeholder="请输入省份"
              :rules="[{ required: true, message: '请填写省份' }]"
            />
            
            <van-field
              v-model="formData.city"
              name="city"
              label="城市 *"
              placeholder="请输入城市"
              :rules="[{ required: true, message: '请填写城市' }]"
            />
            
            <van-field
              v-model="formData.district"
              name="district"
              label="区县 *"
              placeholder="请输入区县"
              :rules="[{ required: true, message: '请填写区县' }]"
            />
            
            <van-field
              v-model="formData.detail"
              name="detail"
              label="详细地址 *"
              type="textarea"
              rows="2"
              autosize
              placeholder="请输入详细地址"
              :rules="[{ required: true, message: '请填写详细地址' }]"
            />
            
            <div class="default-switch-container">
              <van-switch
                v-model="formData.isDefault"
                size="24"
                class="default-switch"
              />
              <span class="default-label">设为默认地址</span>
            </div>
          </van-cell-group>
          
          <div class="form-actions">
            <van-button round block type="primary" native-type="submit">
              保存
            </van-button>
          </div>
        </van-form>
      </div>
    </van-popup>

    <!-- 删除确认弹窗 -->
    <van-dialog
      v-model:show="deleteDialogOpen"
      title="确认删除"
      show-cancel-button
      confirm-button-text="删除"
      confirm-button-color="#ee0a24"
      @confirm="confirmDeleteAddress"
    >
      <div class="delete-confirm-content">
        您确定要删除这个收货地址吗？此操作无法撤销。
      </div>
    </van-dialog>
  </div>
</template>

<script setup>
import { ref, computed, onMounted, watch, nextTick } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { showToast, showSuccessToast, showLoadingToast, closeToast, showDialog,showFailToast } from 'vant'
import { getGoodsDetail, getGoodsPrice } from '@/api/goods'
import { createOrder } from '@/api/order'
import { getDefaultAddress, getAddressList, deleteAddress, setDefaultAddress, addAddress, updateAddress } from '@/api/address'
import sessionManager from '@/utils/auth/sessionManager'

const router = useRouter()
const route = useRoute()
const productId = route.params.id

// 加载状态
const loading = ref(false)
const isLoggedIn = ref(false)

// State variables
const showBuyPopup = ref(false)
const showFullDescription = ref(false)
const selectedSize = ref('')
const quantity = ref(1)
const showAddressPopup = ref(false)
const addressDialogOpen = ref(false)
const deleteDialogOpen = ref(false)
const addressToDelete = ref(null)
const currentAddress = ref(null)
const selectedAddress = ref(null)
const selectedPayment = ref('USDT')
const isProcessingPayment = ref(false)

// 支付方式/币种
const paymentMethods = ref([])

// 地址列表
const addresses = ref([])

// 表单数据
const formData = ref({
  id: '',
  name: '',
  phone: '',
  province: '',
  city: '',
  district: '',
  detail: '',
  isDefault: false
})

// 监听currentAddress变化，更新表单数据
watch(currentAddress, (newVal) => {
  if (newVal) {
    formData.value = { ...newVal }
  }
})

// Product data
const product = ref({
  id: productId || '1',
  name: '',
  productName: '',
  price: '',
  originalPrice: '',
  detail: '', // 商品详情HTML内容
  images: [],
  specs: [],
  selectedSpec: null,
  shipping: {
    location: '',
    method: '普通快递',
    fee: '免运费',
    estimatedDelivery: '3-5天内送达'
  },
  stock: 0,
  likes: 0,
  sales: 0,
  comments: 0,
  payIcon: 'USDT',
  icons: [] // 支付币种列表
})


// 加载商品详情数据
const loadProductDetail = async () => {
  try {
    showLoadingToast({
      message: '加载中...',
      forbidClick: true,
      duration: 0
    })
    
    const res = await getGoodsDetail(productId)
    if (res.code === 0 && res.data) {
      const goodsData = res.data;
      
      // 处理图片数据 - 将逗号分隔的图片字符串转为数组
      const imageArray = goodsData.images ? goodsData.images.split(',') : [];
      
      // 处理规格数据
      const specsArray = goodsData.specs || [];
      
      // 更新商品数据
      product.value = {
        ...product.value,
        id: goodsData.id,
        name: goodsData.productName,
        productName: goodsData.productName,
        detail: goodsData.detail || '<p>暂无详情</p>',
        images: imageArray,
        specs: specsArray,
        selectedSpec: specsArray.length > 0 ? specsArray[0] : null,
        stock: specsArray.length > 0 ? specsArray[0].stock : 0,
        price: specsArray.length > 0 ? specsArray[0].usdtPrice : '0.00',
        originalPrice: specsArray.length > 0 ? 
          (parseFloat(specsArray[0].usdtPrice) * 1.2).toFixed(2) : '0.00',
        sales: specsArray.reduce((total, spec) => total + (spec.sales || 0), 0),
        payIcon: goodsData.payIcon || 'USDT',
        icons: goodsData.icons || ['USDT'] // 默认至少有USDT支付方式
      }
      
      // 初始化支付方式
      initPaymentMethods();
      
      // 初始化选中的规格
      if (specsArray.length > 0) {
        selectedSize.value = specsArray[0].id.toString();
      }
      
    } else {
      showToast('获取商品详情失败')
    }
  } catch (error) {
    console.error('加载商品详情出错:', error)
    showToast('加载商品详情失败')
  } finally {
    closeToast()
  }
}


// 加载用户地址
const loadUserAddresses = async () => {
  try {
    // 检查用户是否登录
    isLoggedIn.value = !!sessionManager.getToken()
    
    if (isLoggedIn.value) {
      // 获取所有地址
      const listRes = await getAddressList()
      if (listRes.code === 0 && listRes.data) {
        // 转换地址列表格式
        const addressList = Array.isArray(listRes.data) ? listRes.data : 
                           (listRes.data.list ? listRes.data.list : []);
        
        addresses.value = addressList.map(addr => ({
          id: addr.id,
          name: addr.name,
          phone: addr.phone,
          province: addr.province,
          city: addr.city,
          district: addr.district,
          detail: addr.address,
          isDefault: addr.isDefault === '1'
        }));
        
        // 查找默认地址
        const defaultAddress = addresses.value.find(addr => addr.isDefault);
        
        // 如果在列表中找到默认地址，则使用它
        if (defaultAddress) {
          selectedAddress.value = defaultAddress;
        } 
        // 否则尝试获取默认地址
        else {
          const defaultRes = await getDefaultAddress();
          if (defaultRes.code === 0 && defaultRes.data) {
            const defaultAddr = {
              id: defaultRes.data.id,
              name: defaultRes.data.name,
              phone: defaultRes.data.phone,
              province: defaultRes.data.province,
              city: defaultRes.data.city,
              district: defaultRes.data.district,
              detail: defaultRes.data.address,
              isDefault: defaultRes.data.isDefault === '1'
            };
            selectedAddress.value = defaultAddr;
            
            // 如果默认地址不在列表中，添加到列表
            if (!addresses.value.some(addr => addr.id === defaultAddr.id)) {
              addresses.value.push(defaultAddr);
            }
          }
        }
      }
    }
  } catch (error) {
    console.error('加载用户地址出错:', error);
    showToast('加载地址失败，请重试');
  }
}

// 处理富文本图片响应式
const processRichTextImages = () => {
  // 等待DOM更新后处理图片
  nextTick(() => {
    const richTextContainer = document.querySelector('.rich-text-content')
    if (richTextContainer) {
      const images = richTextContainer.querySelectorAll('img')
      
      images.forEach(img => {
        // 移除可能的内联样式中的固定宽高
        img.style.width = 'auto'
        img.style.height = 'auto'
        img.style.maxWidth = '100%'
        img.style.display = 'block'
        img.style.margin = '12px auto'
        
        // 添加加载错误处理
        img.onerror = function() {
          this.style.display = 'none'
        }
        
        // 添加加载完成处理
        img.onload = function() {
          // 如果图片原始宽度小于容器宽度，保持原始大小
          const containerWidth = richTextContainer.offsetWidth
          if (this.naturalWidth < containerWidth) {
            this.style.maxWidth = this.naturalWidth + 'px'
          }
        }
      })
      
      // 处理可能包含图片的其他元素
      const figures = richTextContainer.querySelectorAll('figure')
      figures.forEach(figure => {
        figure.style.maxWidth = '100%'
        figure.style.margin = '12px auto'
        figure.style.textAlign = 'center'
      })
    }
  })
}

// 初始化数据
onMounted(() => {
  loadProductDetail()
  loadUserAddresses()
})

// 监听商品detail变化，处理富文本图片
watch(() => product.value.detail, () => {
  processRichTextImages()
}, { flush: 'post' })

// Computed properties
const selectedSpecs = computed(() => {
  const selectedSpecObj = product.value.specs.find(s => s.id.toString() === selectedSize.value);
  
  if (selectedSpecObj) {
    return `${selectedSpecObj.specName}, ${quantity.value}件`;
  } else {
    return '请选择规格';
  }
})

// 初始化支付方式
const initPaymentMethods = () => {
  const icons = product.value.icons || ['USDT'];
  const iconColors = {
    'USDT': '#26A17B',
    'HDFS': '#F7931A',
    'OLO': '#627EEA',
    'BIT': '#C2A633',
    'USDC': '#2775CA',
    'XRP': '#23292F'
  };
  
  const iconNames = {
    'USDT': 'USDT',
    'HDFS': '健康凭证',
    'OLO': 'OLO',
    'BIT': 'BIT',
    'USDC': 'USDC',
    'XRP': '瑞波币'
  };
  
  paymentMethods.value = icons.map(icon => ({
    id: icon,
    name: iconNames[icon] || icon,
    icon: 'gold-coin-o',
    color: iconColors[icon] || '#666666'
  }));
  
  // 默认选择第一个支付方式
  if (paymentMethods.value.length > 0) {
    selectedPayment.value = paymentMethods.value[0].id;
  }
}

// 当前币种价格
const currentCoinPrice = ref('0.00')

// 当前选中规格的单价
const currentPrice = computed(() => {
  // 如果选择的是USDT，直接使用规格中的usdtPrice
  if (selectedPayment.value === 'USDT') {
    const selectedSpecObj = product.value.specs.find(s => s.id.toString() === selectedSize.value);
    return selectedSpecObj ? selectedSpecObj.usdtPrice : '0.00';
  } else {
    // 如果是其他币种，使用获取到的价格
    return currentCoinPrice.value;
  }
})

// 计算总金额（单价 × 数量）
const totalPrice = computed(() => {
  const price = parseFloat(currentPrice.value);
  return (price * quantity.value).toFixed(2);
})

// 监听支付方式变化
watch(selectedPayment, async (newPayment) => {
  if (newPayment !== 'USDT' && selectedSize.value) {
    await fetchCoinPrice();
  }
})

// 监听规格变化
watch(selectedSize, async (newSize) => {
  if (selectedPayment.value !== 'USDT' && newSize) {
    await fetchCoinPrice();
  }
})

// 获取不同币种的价格
const fetchCoinPrice = async () => {
  if (!selectedSize.value || selectedPayment.value === 'USDT') return;
  
  try {
  
    const res = await getGoodsPrice({
      specId: selectedSize.value,
      payIcon: selectedPayment.value
    });
    
    if (res.code === 0 && res.data) {
      currentCoinPrice.value = res.data.price;
    } else {
      //console.log('获取价格失败，将使用USDT价格');
      // 如果获取失败，使用USDT价格作为默认值
      const selectedSpecObj = product.value.specs.find(s => s.id.toString() === selectedSize.value);
      currentCoinPrice.value = selectedSpecObj ? selectedSpecObj.usdtPrice : '0.00';
      selectedPayment.value = 'USDT';
    }
  } catch (error) {
    //console.error('获取币种价格出错:', error);
    // 如果获取失败，使用USDT价格作为默认值，不显示错误提示
    const selectedSpecObj = product.value.specs.find(s => s.id.toString() === selectedSize.value);
    currentCoinPrice.value = selectedSpecObj ? selectedSpecObj.usdtPrice : '0.00';
    selectedPayment.value = 'USDT';
  }
}

// 当前选中规格的库存
const currentStock = computed(() => {
  const selectedSpecObj = product.value.specs.find(s => s.id.toString() === selectedSize.value);
  return selectedSpecObj ? selectedSpecObj.stock : 0;
})

// 规格选择文本
const selectedSpecText = computed(() => {
  const selectedSpecObj = product.value.specs.find(s => s.id.toString() === selectedSize.value);
  return selectedSpecObj ? selectedSpecObj.specName : '请选择规格';
})

// 方法
// 返回上一页
const goBack = () => {
  router.back();
}

// 导航到指定路径
const navigateTo = (path) => {
  router.push(path);
}

// 分享商品
const shareProduct = () => {
  showToast('分享功能开发中');
}

// 收藏商品
const toggleFavorite = () => {
  showToast('收藏功能开发中');
}

// 立即购买
const buyNow = () => {
  if (!isLoggedIn.value) {
    showToast('请先登录');
    router.push('/login');
    return;
  }
  
  showBuyPopup.value = true;
}

// 确认支付
const confirmPayment = async () => {
  // 检查是否选择了规格
  if (!selectedSize.value) {
    showToast('请选择商品规格');
    return;
  }
  
  // 检查是否选择了收货地址
  if (!selectedAddress.value) {
    showToast('请选择收货地址');
    showAddressPopup.value = true;
    return;
  }
  
  // 创建订单并支付
  try {
    isProcessingPayment.value = true;
    // 准备订单数据
    const selectedSpec = product.value.specs.find(s => s.id.toString() === selectedSize.value);
    
    const orderData = {
      goodsId: parseInt(product.value.id),
      specId: parseInt(selectedSize.value),
      quantity: quantity.value,
      addressId: selectedAddress.value.id,
      totalAmount: totalPrice.value,
      payIcon: selectedPayment.value, // 支付币种
      remark: 0, // 备注字段，后端要求为int类型
    };
    
    // 调用创建订单接口
    const res = await createOrder(orderData);
    
    if (res.code === 0 && res.data) {
      // 订单创建成功
      showSuccessToast('订单创建成功');
      showBuyPopup.value = false;
      
      // 跳转到订单详情页或支付页面
      router.push({
        path: '/order/detail',
        query: { id: res.data.orderId }
      });
    }
  } catch (error) {
    console.error('创建订单出错:', error);
  } finally {
    isProcessingPayment.value = false;
  }
}

// 添加新地址
const handleAddAddress = () => {
  currentAddress.value = null;
  formData.value = {
    id: '',
    name: '',
    phone: '',
    province: '',
    city: '',
    district: '',
    detail: '',
    isDefault: false
  };
  addressDialogOpen.value = true;
}

// 编辑地址
const handleEditAddress = (address) => {
  currentAddress.value = address;
  addressDialogOpen.value = true;
}

// 删除地址
const handleDeleteAddress = (addressId) => {
  addressToDelete.value = addressId;
  deleteDialogOpen.value = true;
}

// 确认删除地址
const confirmDeleteAddress = async () => {
  if (!addressToDelete.value) return;
  
  try {
    showLoadingToast({
      message: '正在删除...',
      forbidClick: true,
      duration: 0
    });
    
    const res = await deleteAddress(addressToDelete.value);
    if (res.code === 0) {
      showSuccessToast('删除成功');
      
      // 重新加载地址列表
      await loadUserAddresses();
    } else {
      showToast('删除失败: ' + (res.msg || '未知错误'));
    }
  } catch (error) {
    console.error('删除地址出错:', error);
    showToast('删除失败，请重试');
  } finally {
    closeToast();
    addressToDelete.value = null;
    deleteDialogOpen.value = false;
  }
}

// 保存地址
const handleSaveAddress = async () => {
  try {
    showLoadingToast({
      message: '正在保存...',
      forbidClick: true,
      duration: 0
    });
    
    // 准备地址数据
    const addressData = {
      name: formData.value.name,
      phone: formData.value.phone,
      province: formData.value.province,
      city: formData.value.city,
      district: formData.value.district,
      address: formData.value.detail, // API中使用address字段
      isDefault: formData.value.isDefault ? '1' : '0' // API中使用字符串'1'/'0'
    };
    
    let res;
    
    if (formData.value.id) {
      // 编辑现有地址
      res = await updateAddress({
        ...addressData,
        id: formData.value.id
      });
    } else {
      // 添加新地址
      res = await addAddress(addressData);
    }
    
    if (res.code === 0) {
      showSuccessToast('保存成功');
      
      // 如果设为默认地址，调用设置默认地址接口
      if (formData.value.isDefault && res.data && res.data.id) {
        await setDefaultAddress(res.data.id);
      }
      
      // 重新加载地址列表
      await loadUserAddresses();
      
      // 关闭弹窗
      addressDialogOpen.value = false;
    } else {
      showToast(res.msg || '保存失败');
    }
  } catch (error) {
    console.error('保存地址出错:', error);
    showToast('保存失败，请重试');
  } finally {
    closeToast();
  }
}

// 选择地址
const selectAddress = async (address) => {
  try {
    // 如果选择的不是默认地址，且用户希望设为默认地址
    if (!address.isDefault) {
      const shouldSetDefault = await new Promise(resolve => {
        showDialog({
          title: '设为默认地址',
          message: '是否将此地址设为默认收货地址？',
          showCancelButton: true,
          confirmButtonText: '设为默认',
          cancelButtonText: '暂不设置'
        }).then(() => {
          resolve(true);
        }).catch(() => {
          resolve(false);
        });
      });
      
      if (shouldSetDefault) {
        showLoadingToast({
          message: '正在设置默认地址...',
          forbidClick: true,
          duration: 0
        });
        
        const res = await setDefaultAddress(address.id);
        if (res.code === 0) {
          // 更新地址列表中的默认状态
          addresses.value.forEach(addr => {
            addr.isDefault = addr.id === address.id;
          });
          
          address.isDefault = true;
          showSuccessToast('已设为默认地址');
        }
        
        closeToast();
      }
    }
    
    // 设置选中的地址
    selectedAddress.value = address;
    showAddressPopup.value = false;
  } catch (error) {
    console.error('设置默认地址出错:', error);
    // 即使设置默认地址失败，仍然选择该地址
    selectedAddress.value = address;
    showAddressPopup.value = false;
  }
}
</script>

<style scoped>
.product-detail-container {
  padding-bottom: 60px;
  background-color: #f7f8fa;
}

/* 导航头部 */
.nav-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 44px;
  background-color: rgba(255, 255, 255, 0.95);
  z-index: 100;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.nav-header-content {
  display: flex;
  align-items: center;
  height: 100%;
  padding: 0 16px;
}

.back-button {
  padding: 8px;
  margin-left: -8px;
}

.header-title {
  flex: 1;
  text-align: center;
  font-size: 16px;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin: 0 16px;
}

.header-actions {
  display: flex;
  gap: 16px;
}

.action-icon {
  padding: 8px;
}

/* 图片轮播 */
.image-gallery {
  margin-top: 44px;
  width: 100%;
  height: 300px;
  background-color: #f5f5f5;
}

.product-swipe {
  height: 100%;
}

.gallery-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 商品信息卡片 */
.product-info-card {
  background-color: #fff;
  padding: 16px;
  margin-bottom: 8px;
}

.product-price-row {
  display: flex;
  align-items: baseline;
  margin-bottom: 8px;
}

.product-price {
  display: flex;
  align-items: baseline;
  color: #ee0a24;
}

.currency {
  font-size: 14px;
  margin-right: 2px;
}

.amount {
  font-size: 24px;
  font-weight: bold;
}

.original-price {
  margin-left: 8px;
  font-size: 14px;
  color: #999;
  text-decoration: line-through;
}

.product-title {
  font-size: 16px;
  font-weight: 500;
  margin: 8px 0;
  line-height: 1.4;
}

.product-stats {
  display: flex;
  margin-top: 12px;
  color: #666;
  font-size: 12px;
}

.stat-item {
  display: flex;
  align-items: center;
  margin-right: 16px;
}

.stat-item .van-icon {
  margin-right: 4px;
  font-size: 14px;
}

/* 商品部分 */
.product-section {
  background-color: #fff;
  margin-bottom: 8px;
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  border-bottom: 1px solid #f5f5f5;
}

.section-title {
  font-size: 14px;
  font-weight: 500;
  display: flex;
  align-items: center;
}

.review-count {
  font-size: 12px;
  color: #999;
  margin-left: 4px;
}

.section-action {
  display: flex;
  align-items: center;
  color: #999;
  font-size: 12px;
}

.action-text {
  margin-right: 4px;
}

.review-rating {
  display: flex;
  align-items: center;
}

.review-rating .van-rate {
  margin-right: 4px;
}

/* 配送信息 */
.shipping-info {
  padding: 12px 16px;
}

.shipping-item {
  display: flex;
  margin-bottom: 12px;
}

.shipping-item:last-child {
  margin-bottom: 0;
}

.shipping-icon {
  font-size: 18px;
  margin-right: 12px;
  color: #666;
}

.shipping-text {
  flex: 1;
  font-size: 14px;
}

.shipping-subtext {
  font-size: 12px;
  color: #999;
  margin-top: 2px;
}

/* 商品描述 */
.product-description {
  padding: 16px;
  max-height: 120px;
  overflow: hidden;
  transition: max-height 0.3s;
}

.product-description.expanded {
  max-height: none;
}

.detail-content {
  font-size: 14px;
  line-height: 1.6;
  color: #333;
  word-break: break-word;
  overflow-wrap: break-word;
}

/* 富文本内容样式优化 */
.rich-text-content {
  /* 清除默认样式并强制响应式 */
  * {
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
  
  /* 段落样式 */
  p {
    margin: 0 0 12px;
    line-height: 1.6;
  }
  
  /* 图片样式 - 强化响应式处理 */
  img {
    max-width: 100% !important;
    width: auto !important;
    height: auto !important;
    margin: 12px auto;
    border-radius: 8px;
    display: block !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    transition: all 0.3s ease;
    object-fit: contain;
    /* 防止图片被拉伸变形 */
    aspect-ratio: auto;
    /* 确保图片不会超出容器 */
    contain: layout style;
  }
  
  img:hover {
    transform: scale(1.02);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);
  }
  
  /* 针对可能的内联样式覆盖 */
  img[style*="width"] {
    width: auto !important;
    max-width: 100% !important;
  }
  
  img[style*="height"] {
    height: auto !important;
  }
  
  /* 图片容器处理 */
  p img,
  div img {
    max-width: 100% !important;
    width: auto !important;
    height: auto !important;
  }
  
  /* 标题样式 */
  h1, h2, h3, h4, h5, h6 {
    margin: 20px 0 12px;
    font-weight: 600;
    line-height: 1.3;
    color: #2c3e50;
  }
  
  h1 { font-size: 20px; border-bottom: 2px solid #1989fa; padding-bottom: 8px; }
  h2 { font-size: 18px; color: #34495e; }
  h3 { font-size: 16px; color: #34495e; }
  h4 { font-size: 15px; color: #34495e; }
  h5 { font-size: 14px; color: #34495e; }
  h6 { font-size: 13px; color: #34495e; }
  
  /* 列表样式 */
  ul, ol {
    padding-left: 20px;
    margin: 12px 0;
  }
  
  li {
    margin-bottom: 6px;
    line-height: 1.5;
  }
  
  ul li {
    list-style-type: disc;
  }
  
  ol li {
    list-style-type: decimal;
  }
  
  /* 表格样式 */
  table {
    width: 100%;
    border-collapse: collapse;
    margin: 16px 0;
    background-color: #fff;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  }
  
  th, td {
    padding: 12px;
    text-align: left;
    border-bottom: 1px solid #eee;
  }
  
  th {
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    font-weight: 600;
    color: #495057;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
  }
  
  tbody tr:hover {
    background-color: #f8f9fa;
  }
  
  /* 引用样式 */
  blockquote {
    margin: 16px 0;
    padding: 16px 20px;
    border-left: 4px solid #1989fa;
    background: linear-gradient(135deg, #f0f8ff 0%, #e6f3ff 100%);
    border-radius: 0 8px 8px 0;
    color: #555;
    font-style: italic;
    position: relative;
  }
  
  blockquote::before {
    content: '"';
    position: absolute;
    top: -5px;
    left: 15px;
    font-size: 40px;
    color: #1989fa;
    opacity: 0.3;
  }
  
  /* 链接样式 */
  a {
    color: #1989fa;
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: all 0.3s ease;
    font-weight: 500;
  }
  
  a:hover {
    border-bottom-color: #1989fa;
    color: #0c7cd5;
  }
  
  /* 代码样式 */
  code {
    background-color: #f1f3f4;
    padding: 2px 6px;
    border-radius: 4px;
    font-family: 'Courier New', monospace;
    font-size: 13px;
    color: #d73a49;
  }
  
  pre {
    background-color: #f6f8fa;
    padding: 16px;
    border-radius: 8px;
    overflow-x: auto;
    margin: 16px 0;
    border: 1px solid #e1e4e8;
  }
  
  pre code {
    background: none;
    padding: 0;
    color: #24292e;
  }
  
  /* 强调样式 */
  strong, b {
    font-weight: 600;
    color: #2c3e50;
  }
  
  em, i {
    font-style: italic;
    color: #555;
  }
  
  /* 分隔线样式 */
  hr {
    border: none;
    height: 2px;
    background: linear-gradient(90deg, transparent, #ddd, transparent);
    margin: 20px 0;
  }
  
  /* 删除线样式 */
  del, s {
    text-decoration: line-through;
    opacity: 0.7;
  }
  
  /* 下划线样式 */
  u {
    text-decoration: underline;
    text-decoration-color: #1989fa;
  }
  
  /* 小字体样式 */
  small {
    font-size: 12px;
    color: #666;
  }
  
  /* 标记样式 */
  mark {
    background-color: #fff3cd;
    padding: 2px 4px;
    border-radius: 3px;
  }
  
  /* 视频样式 */
  video {
    max-width: 100% !important;
    height: auto !important;
    border-radius: 8px;
    margin: 12px 0;
  }
  
  /* iframe样式 */
  iframe {
    max-width: 100% !important;
    border-radius: 8px;
    margin: 12px 0;
  }
  
  /* 响应式处理 */
  @media (max-width: 768px) {
    font-size: 13px;
    
    /* 移动端图片优化 */
    img {
      margin: 8px auto !important;
      border-radius: 6px !important;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
      /* 移动端禁用悬停效果 */
      transform: none !important;
    }
    
    img:hover {
      transform: none !important;
    }
    
    h1 { font-size: 18px; }
    h2 { font-size: 16px; }
    h3 { font-size: 15px; }
    h4 { font-size: 14px; }
    h5 { font-size: 13px; }
    h6 { font-size: 12px; }
    
    table {
      font-size: 12px;
      /* 移动端表格横向滚动 */
      display: block;
      overflow-x: auto;
      white-space: nowrap;
    }
    
    th, td {
      padding: 8px;
      min-width: 80px;
    }
    
    blockquote {
      padding: 12px 16px;
      margin: 12px 0;
    }
    
    pre {
      padding: 12px;
      margin: 12px 0;
      overflow-x: auto;
    }
    
    /* 视频和iframe移动端优化 */
    video, iframe {
      width: 100% !important;
      height: auto !important;
      max-height: 250px;
    }
  }
  
  /* 超小屏幕优化 */
  @media (max-width: 480px) {
    font-size: 12px;
    
    img {
      margin: 6px auto !important;
      border-radius: 4px !important;
    }
    
    h1 { font-size: 16px; }
    h2 { font-size: 15px; }
    h3 { font-size: 14px; }
    h4 { font-size: 13px; }
    h5 { font-size: 12px; }
    h6 { font-size: 11px; }
    
    blockquote {
      padding: 8px 12px;
      margin: 8px 0;
    }
    
    pre {
      padding: 8px;
      margin: 8px 0;
      font-size: 11px;
    }
    
    table {
      font-size: 10px;
    }
    
    th, td {
      padding: 6px;
      min-width: 60px;
    }
  }
  
  /* 大屏幕优化 */
  @media (min-width: 1024px) {
    img {
      max-width: 80%;
      margin: 16px auto;
    }
  }
}


/* 底部操作栏 */
.bottom-action-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 60px;
  background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
  box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.08);
  z-index: 100;
  border-top: 1px solid #f0f0f0;
}

.action-bar-content {
  display: flex;
  height: 100%;
  align-items: center;
  padding: 0 16px;
  gap: 12px;
}

.action-buttons {
  display: flex;
  gap: 8px;
}

.action-button {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 44px;
  border-radius: 12px;
  background: #f8f9fa;
  border: 1px solid #e9ecef;
  color: #495057;
  font-size: 11px;
  font-weight: 500;
  transition: all 0.3s ease;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.action-button::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  opacity: 0;
  transition: opacity 0.3s ease;
  border-radius: 11px;
}

.action-button:hover::before {
  opacity: 1;
}

.action-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(102, 126, 234, 0.3);
  border-color: #667eea;
}

.action-button:hover .van-icon,
.action-button:hover span {
  color: white;
  z-index: 1;
  position: relative;
}

.action-button .van-icon {
  margin-bottom: 2px;
  font-size: 18px;
  transition: color 0.3s ease;
  z-index: 1;
  position: relative;
}

.action-button span {
  z-index: 1;
  position: relative;
  transition: color 0.3s ease;
}

.purchase-buttons {
  flex: 1;
  display: flex;
  justify-content: flex-end;
}

.buy-now-button {
  height: 44px;
  font-size: 16px;
  font-weight: 600;
  border-radius: 22px;
  background: linear-gradient(135deg, #ff6b6b 0%, #ee5a24 100%);
  border: none;
  box-shadow: 0 4px 15px rgba(238, 90, 36, 0.3);
  transition: all 0.3s ease;
  min-width: 120px;
}

.buy-now-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(238, 90, 36, 0.4);
}

.buy-now-button:active {
  transform: translateY(0);
}

/* 购买弹窗 */
.buy-popup {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.buy-header {
  padding: 16px 16px 16px 48px; /* 增加左侧内边距，为关闭按钮留出空间 */
  border-bottom: 1px solid #f5f5f5;
}

.buy-product-preview {
  display: flex;
}

.buy-product-image {
  width: 80px;
  height: 80px;
  object-fit: cover;
  border-radius: 4px;
  margin-right: 12px;
}

.buy-product-info {
  flex: 1;
}

.buy-product-price {
  font-size: 18px;
  color: #ee0a24;
  font-weight: 500;
  margin-bottom: 4px;
}

.buy-product-stock, .buy-selected {
  font-size: 12px;
  color: #999;
  margin-bottom: 4px;
}

.buy-content {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
}

.specs-selection-area {
  margin-bottom: 16px;
}

.buy-section {
  margin-bottom: 20px;
}

.buy-title {
  font-size: 14px;
  font-weight: 500;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
}

.required-mark {
  color: #ee0a24;
  margin-right: 4px;
}

.stock-info {
  margin-left: auto;
  font-size: 12px;
  color: #999;
  font-weight: normal;
}

.buy-options {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.buy-option {
  padding: 8px 16px;
  border-radius: 4px;
  border: 1px solid #ddd;
  font-size: 12px;
  position: relative;
  background-color: #f7f8fa;
}

.buy-option.selected {
  color: #1989fa;
  border-color: #1989fa;
  background-color: #ecf5ff;
}

.buy-option.disabled {
  color: #ccc;
  background-color: #f5f5f5;
  cursor: not-allowed;
}

.sold-out-tag {
  position: absolute;
  top: -8px;
  right: -8px;
  background-color: #ee0a24;
  color: #fff;
  font-size: 10px;
  padding: 2px 6px;
  border-radius: 10px;
}

.color-preview {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  margin-right: 6px;
  display: inline-block;
  vertical-align: middle;
}

.quantity-selector {
  margin-top: 8px;
}

/* 地址选择 */
.address-section {
  border-top: 8px solid #f7f8fa;
  padding-top: 16px;
}

.address-selector {
  background-color: #f7f8fa;
  border-radius: 4px;
  padding: 12px;
  display: flex;
  align-items: center;
}

.selected-address {
  flex: 1;
}

.address-brief {
  margin-bottom: 4px;
}

.address-name {
  font-weight: 500;
  margin-right: 8px;
}

.address-phone {
  color: #666;
}

.address-full {
  font-size: 12px;
  color: #666;
}

.no-address {
  display: flex;
  align-items: center;
  color: #999;
}

.location-icon {
  margin-right: 4px;
}

.address-arrow {
  margin-left: 8px;
  color: #999;
}

/* 支付方式 */
.payment-section {
  border-top: 8px solid #f7f8fa;
  padding-top: 16px;
}

.payment-options {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.payment-option {
  display: flex;
  align-items: center;
  padding: 12px;
  background-color: #f7f8fa;
  border-radius: 4px;
}

.payment-option.selected {
  background-color: #ecf5ff;
}

.payment-icon {
  margin-right: 12px;
}

.payment-name {
  flex: 1;
  font-size: 14px;
}

.payment-check {
  width: 24px;
}

/* 订单金额 */
.order-summary {
  border-top: 8px solid #f7f8fa;
  padding-top: 16px;
}

.summary-item {
  display: flex;
  justify-content: space-between;
  margin-bottom: 8px;
  font-size: 14px;
}

.summary-total {
  display: flex;
  justify-content: space-between;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid #f5f5f5;
  font-weight: 500;
}

.total-price {
  color: #ee0a24;
  font-size: 16px;
}

.buy-footer {
  padding: 16px;
  border-top: 1px solid #f5f5f5;
}

/* 地址弹窗 */
.address-popup {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.address-popup-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 16px 16px 48px; /* 增加左侧内边距，为关闭按钮留出空间 */
  border-bottom: 1px solid #f5f5f5;
  position: relative;
}

.popup-title {
  font-size: 16px;
  font-weight: 500;
}

.address-list {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
}

.address-item {
  position: relative;
  background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
  border-radius: 16px;
  padding: 20px;
  margin-bottom: 16px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
  border: 2px solid transparent;
  transition: all 0.3s ease;
  cursor: pointer;
}

.address-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
  border-color: #667eea;
}

.address-content {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
}

.address-info {
  flex: 1;
  margin-right: 16px;
}

.contact-info {
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.name {
  font-weight: 600;
  font-size: 16px;
  color: #2d3748;
}

.phone {
  color: #718096;
  font-size: 14px;
  background: #edf2f7;
  padding: 4px 8px;
  border-radius: 12px;
}

.default-tag {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  font-weight: 600;
  font-size: 11px;
  padding: 4px 10px;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(102, 126, 234, 0.3);
}

.address-detail {
  font-size: 14px;
  color: #4a5568;
  line-height: 1.6;
  background: #f7fafc;
  padding: 8px 12px;
  border-radius: 8px;
  border-left: 3px solid #667eea;
}

.address-actions {
  display: flex;
  gap: 8px;
  align-items: flex-start;
}

.address-actions .action-button {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  cursor: pointer;
  border: 2px solid transparent;
}

.address-actions .action-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
}

.address-actions .action-button:first-child {
  background: linear-gradient(135deg, #e6fffa 0%, #b2f5ea 100%);
  color: #319795;
}

.address-actions .action-button:first-child:hover {
  background: linear-gradient(135deg, #319795 0%, #2c7a7b 100%);
  color: white;
  border-color: #319795;
}

.address-actions .action-button:last-child {
  background: linear-gradient(135deg, #fed7d7 0%, #feb2b2 100%);
  color: #e53e3e;
}

.address-actions .action-button:last-child:hover {
  background: linear-gradient(135deg, #e53e3e 0%, #c53030 100%);
  color: white;
  border-color: #e53e3e;
}

.edit-icon,
.delete-icon {
  font-size: 16px;
  transition: all 0.3s ease;
}

.address-select-indicator {
  padding: 2px 6px;
  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 6px rgba(16, 185, 129, 0.3);
  font-size: 10px;
  font-weight: 600;
  color: white;
  margin-left: 8px;
}

.address-select-indicator::before {
  content: '已选择';
  margin-right: 2px;
}

.address-select-indicator .van-icon {
  font-size: 12px;
}

/* 空状态 */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px 0;
}

.empty-icon {
  color: #ddd;
  margin-bottom: 16px;
}

.empty-text {
  font-size: 16px;
  color: #666;
  margin-bottom: 8px;
}

.empty-subtext {
  font-size: 14px;
  color: #999;
}

/* 地址表单 */
.form-header {
  padding: 16px 16px 16px 48px; /* 增加左侧内边距，为关闭按钮留出空间 */
  border-bottom: 1px solid #f5f5f5;
}

.form-title {
  font-size: 16px;
  font-weight: 500;
  margin-bottom: 4px;
}

.form-subtitle {
  font-size: 12px;
  color: #999;
}

.address-form {
  padding: 16px;
}

.default-switch-container {
  display: flex;
  align-items: center;
  padding: 16px;
}

.default-switch {
  margin-right: 12px;
}

.default-label {
  font-size: 14px;
}

.form-actions {
  margin-top: 24px;
}

/* 删除确认弹窗 */
.delete-confirm-content {
  padding: 16px;
  text-align: center;
  color: #666;
}
</style>
